<template>
  <div>
    <ul>
      <li>
        <p><text selectable='true'>病情描述</text></p>
        <p><text selectable='true'>{{infoDetails.current_medical_history}}</text></p>
      </li>
      <!-- <li>
        <p>现病史</p>
        <p>{{infoDetails.current_medical_history || ''}}
          <span v-if="infoDetails.current_medical_history">{{infoDetails.current_medical_history}}</span>
          <span v-else>无</span>
        </p>
      </li> -->
      <li>
        <p><text selectable='true'>既往史</text></p>
        <p class="blockClass" v-if="infoDetails.anamnesis.crb || infoDetails.anamnesis.jb || infoDetails.anamnesis.qt || infoDetails.anamnesis.sss">
          <span v-if="infoDetails.anamnesis.crb"><text selectable='true'>传染病史:&nbsp;&nbsp;{{infoDetails.anamnesis.crb}}　</text></span>
          <span v-if="infoDetails.anamnesis.jb"><text selectable='true'>疾病史:&nbsp;&nbsp;{{infoDetails.anamnesis.jb}}　</text></span>
          <span v-if="infoDetails.anamnesis.sss"><text selectable='true'>手术史:&nbsp;&nbsp;{{infoDetails.anamnesis.sss}}</text></span>
          <span v-if="infoDetails.anamnesis.qt"><text selectable='true'>其它:&nbsp;&nbsp;{{infoDetails.anamnesis.qt}}　</text></span>
        </p>
        <p v-else>
          无
        </p>
      </li>
      <li>
        <p><text selectable='true'>过敏史</text></p>
        <p class="blockClass" v-if="infoDetails.allergy_history.qt || infoDetails.allergy_history.swgm || infoDetails.allergy_history.ywgm">
          <span v-if="infoDetails.allergy_history.swgm"><text selectable='true'>食物过敏:&nbsp;&nbsp;{{infoDetails.allergy_history.swgm}}　</text></span>
          <span v-if="infoDetails.allergy_history.ywgm"><text selectable='true'>药物过敏:&nbsp;&nbsp;{{infoDetails.allergy_history.ywgm}}　</text></span>
          <span v-if="infoDetails.allergy_history.qt"><text selectable='true'>其他:&nbsp;&nbsp;{{infoDetails.allergy_history.qt}}　</text></span>
        </p>
        <p v-else>
          无
        </p>
      </li>
      <li>
        <p><text selectable='true'>婚育史</text></p>
        <p v-if="infoDetails.obsterical_history.hyzk || infoDetails.obsterical_history.syzt">
          <span v-if="infoDetails.obsterical_history.hyzk">
            <text selectable='true'>婚育状态:&nbsp;&nbsp;{{infoDetails.obsterical_history.hyzk}}　</text>
            </span>
          <span v-if="infoDetails.obsterical_history.syzt">
            <text selectable='true'>生育妊娠状态:&nbsp;&nbsp;{{infoDetails.obsterical_history.syzt}}</text>
          </span>
        </p>
        <p v-else>
          无
        </p>
      </li>
      <li>
        <p><text selectable='true'>家族史</text></p>
        <p class="blockClass" v-if="infoDetails.family_history.qt || infoDetails.family_history.jzs_jsz">
          <span v-if="infoDetails.family_history.jzs_jsz"><text selectable='true'>{{infoDetails.family_history.jzs_jsz}}　</text></span>
          <span v-if="infoDetails.family_history.qt"><text selectable='true'>其他:&nbsp;&nbsp;{{infoDetails.family_history.qt}}　</text></span>
        </p>
        <p v-else>
          无
        </p>
      </li>
      <li>
        <p><text selectable='true'>个人习惯</text></p>
        <p class="blockClass"  v-if="infoDetails.personal_habits.qt || infoDetails.personal_habits.grxg_grxg">
          <span v-if="infoDetails.personal_habits.grxg_grxg"><text selectable='true'>{{infoDetails.personal_habits.grxg_grxg}}　</text></span>
          <span v-if="infoDetails.personal_habits.qt"><text selectable='true'>其他:&nbsp;&nbsp;{{infoDetails.personal_habits.qt}}　</text></span>
        </p>
        <p v-else>
          无
        </p>
      </li>
      <li>
        <p>附件资料</p>
        <p v-if="infoDetails.upload_image && infoDetails.upload_image.length > 0">
        <span v-for="(item, index) in infoDetails.upload_image" :key='index' >
          <img :src="item.file_url" alt="" @click="showImg(item)">
        </span>
        </p>
        <p v-else>
          无
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      infoDetails: {
        anamnesis: { // 既往史
          crb: '',
          jb: '',
          qt: '',
          sss: ''
        },
        obsterical_history: { // 婚育史
          hyzk: '',
          syzt: ''
        },
        allergy_history: { // 过敏史
          qt: '',
          swgm: '',
          ywgm: ''
        },
        family_history: { // 家族史
          qt: '',
          jzs_jsz: ''
        },
        personal_habits: { // 个人习惯
          qt: '',
          grxg_grxg: ''
        },
        upload_image: []
      },
    }
  },
  onLoad () {
    this.getInfo(this.talkInfo.apt_id || this.videoInfo.apt_id)
  },
  computed: {
    ...mapState([
      'talkInfo', 'videoInfo'
    ])
  },
  methods: {
    // 查看图片
    showImg (item) {
      let arr = []
      for (let i = 0; i < this.infoDetails.upload_image.length; i++) {
        arr.push(this.infoDetails.upload_image[i].file_url)
      }
      mpvue.offAppHide()
      mpvue.previewImage({
        current: item.file_url, // 当前显示图片的http链接
        urls: arr // 需要预览的图片http链接列表
      })
    },
    // 查看详情
    getInfo (id) {
      let that  = this
      that.$api.getEmrInfo({'apt_id': id}, ({'showLoading': true})).then(function (res) {
        that.infoDetails = res.data[0]
        that.infoDetails.allergy_history = that.infoDetails.allergy_history
        that.infoDetails.anamnesis = that.infoDetails.anamnesis
        that.infoDetails.family_history = that.infoDetails.family_history
        that.infoDetails.obsterical_history = that.infoDetails.obsterical_history
        that.infoDetails.personal_habits = that.infoDetails.personal_habits
      })
    },
  }
}
</script>

<style scoped lang='less'>

  img {
    width: 88rpx;
    height: 88rpx;
    margin-right: 26rpx;
  }
  li {
    margin-bottom: 33rpx;
    font-size: 32rpx;
    p:nth-child(1) {
      margin-bottom: 12rpx;
      font-weight: 600;
    }
  }
  .blockClass{
    span{
      display: block;
    }
  }
</style>
